// gulp 运行的配置文件
//引入 gulp
const gulp = require('gulp');
//导入 gulp-babel
const babel = require('gulp-babel');
//导入 gulp-browserify 
const browserify = require('gulp-browserify');
const rename = require('gulp-rename');
//导入压缩代码的包
const uglify = require('gulp-uglify');
//导入打包 less 包
const less = require('gulp-less');
const LessAutoprefix = require('less-plugin-autoprefix');// auto 自动 prefix 前缀   -webkit -o
const autoprefix = new LessAutoprefix({ browsers: ['last 20 versions'] });// browsers 浏览器  last 2 versions 最新的两个版本  
//导入合并 css 的包
const concat = require('gulp-concat');
//导入压缩 css 包
const cssmin = require('gulp-cssmin');
//压缩 html 文件
const htmlmin = require('gulp-htmlmin');
//热加载包
const livereload = require('gulp-livereload');
//创建 http 服务
const connect = require('gulp-connect');
//自动打开浏览器
const opn = require('opn');

//创建 gulp 任务
gulp.task('hello', async () => {
    console.log('你好 Gulp, 我来了!! 初次见面, 请多多关照');
});

//babel语法转换的任务   pipe 管道  createReadStream createWriteSteam  
gulp.task('babel', () => {
    return gulp.src('./src/js/*.js')
        .pipe(babel({ //进行语法转换
            presets: ['@babel/env']
        })).pipe(gulp.dest('build/js')).pipe(livereload())//输出到指定目录
});

//打包任务
gulp.task('browserify', function () {
    return gulp.src('./build/js/app.js')
        .pipe(browserify())					//将CommonJs语法转换为浏览器能识别的语法
        .pipe(rename('built.js'))			//为了防止冲突将文件重命名
        .pipe(gulp.dest('build/js')).pipe(livereload())		//输出到指定位置
});

//压缩代码
gulp.task('uglify', function () {
    return gulp.src('build/js/built.js')
        .pipe(uglify())  //压缩js
        .pipe(rename('dist.min.js'))
        .pipe(gulp.dest('dist/js')).pipe(livereload())
});

//批量执行任务
gulp.task('js', gulp.series('babel', 'browserify', 'uglify'));

//less 语法转化
gulp.task('less', function () {
    return gulp.src('./src/less/*.less')
        .pipe(less({
            plugins: [autoprefix]//自动扩展前缀
        }))
        .pipe(gulp.dest('./build/css')).pipe(livereload());
});

//css 合并
gulp.task('concat', function () {
    return gulp.src('./build/css/*.css')
        .pipe(concat('built.css'))
        .pipe(gulp.dest('./build/css/concat')).pipe(livereload());
});

//css 压缩
gulp.task('cssmin', function () {
    return gulp.src('build/css/concat/built.css')
        .pipe(cssmin())
        .pipe(rename('dist.min.css'))
        .pipe(gulp.dest('dist/css')).pipe(livereload());
});

gulp.task('css', gulp.series('less', 'concat', 'cssmin'));


gulp.task('htmlmin', () => {
    return gulp.src('src/index.html')
        .pipe(htmlmin({
            collapseWhitespace: true,//去除空格
            removeComments: true //去除注释
        }))
        .pipe(gulp.dest('dist')).pipe(livereload());
});

//自动化构建任务配置
gulp.task('default', function () {
    //2. 启动热加载服务
    livereload.listen();
    //3. 通过自己 HTTP 服务器打开项目，自动刷新
    connect.server({
        root: 'dist',  //根 HTTP 服务的网站根目录(静态资源文件夹)  =>  express.static('./public');
        port: 3000,   // 监听端口
        livereload: true  //自动更新页面
    });
    //4. 自动打开浏览器
    opn('http://localhost:3000/index.html');
    //5. 监视指定文件（第一个参数），一旦文件发生变化，就自动执行后面的任务（第二个参数）
    gulp.watch('src/less/*.less', gulp.series(['less', 'concat', 'cssmin']));
    gulp.watch('./src/js/*.js', gulp.series(['babel', 'browserify', 'uglify']));
    gulp.watch('./src/index.html', gulp.series('htmlmin'));
});